<template>
    <view :class="ns.b()" :style="imageStyle">
        <!-- 图片加载出来之前的占位-->
        <view class="placeholder"></view>

        <image
            class="image"
            :src="src"
            :mode="mode"
            lazy-load-margin="1"
            lazy-load
            @load="onImageLoad"
            @error="onImageError"
        />
    </view>
</template>

<script setup lang="ts">
import { useNamespace } from "@/hooks";

const ns = useNamespace("image");

const props = defineProps({
    src: {
        type: String,
        default: ""
    },
    width: {
        type: String,
        default: ""
    },
    height: {
        type: String,
        default: ""
    },
    mode: {
        type: String,
        default: ""
    }
});

const imageStyle = computed(() => ({
    width: props.width
}));

/**
 * @description 图片加载完成
 * */
const onImageLoad = () => {};

/**
 * @description 图片加载失败
 * */
const onImageError = () => {};
</script>

<style scoped lang="scss">
@import "./index";
</style>
